<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Logueo</title>

<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" media="screen" href="def/jquery-ui.css">
<link rel="stylesheet" type="text/css" media="screen" href="def/style.css">
<script type="text/javascript" src="def/jquery-1.8.3.js"></script>
<script type="text/javascript" src="def/jquery-ui.js"></script>

<script>
	$(function() {
		$("#datepicker").datepicker();
	});
</script>
</head>

<body data-spy="scroll" data-target=".bs-docs-sidebar">

<jsp:include page="../jsp/menu.jsp"><jsp:param name="pageAct" value="Base CSS" /></jsp:include>



	<p>
		Date: <input type="text" id="datepicker" />
	</p>

	<select name="color" size="1">
		<option value="light">light</option>
		<option value="amber">amber</option>
		<option value="brown">brown</option>
		<option value="dark">dark</option>
	</select> 

	<select name='club'>
		<c:forEach var='club' items='${applicationScope.masterTables.Club}'>
			<option value=’${club.idClub}’>${club.nombre}</option>
		</c:forEach>
	</select>
<br>
<br>
<br>
    <table>
       <c:forEach var='club' items='${applicationScope.masterTables.Club}' varStatus='rowCounter'>
         <c:choose>
           <c:when test='${rowCounter.count % 2 == 0}'>
             <c:set var='rowStyle' scope='page' value='odd'/>
           </c:when>
           <c:otherwise>
             <c:set var='rowStyle' scope='page' value='even'/>
           </c:otherwise>
         </c:choose>
         <tr class='${rowStyle}'>
           <td>${club.nombre}</td>
           <td>${club.direccion}</td>
           <td>${club.precioPers}</td>
         </tr>
       </c:forEach>
     </table>
     
     <div class="row">
     	<div class="span4">A</div>
     	<div class="span8">B</div>
     </div>
     
     
         <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="assets/js/widgets.js"></script>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
    <script src="assets/js/bootstrap-affix.js"></script>
    <script src="assets/js/application.js"></script>
     
